<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="col-2 q-pr-sm">
        <q-card flat>
          <q-tabs
            v-model="tab"
            vertical
            @update:model-value="
              (val) => {
                router.push({
                  path: route.path,
                  query: {
                    tabPage: val,
                  },
                });
              }
            "
          >
            <q-tab name="home" label="个人资料" />
            <q-tab name="account" label="账号管理" />
          </q-tabs>
        </q-card>
      </div>

      <div class="col">
        <q-tab-panels
          v-model="tab"
          animated
          swipeable
          vertical
          transition-prev="jump-up"
          transition-next="jump-up"
        >
          <q-tab-panel name="home" class="q-pa-none">
            <UserInfo></UserInfo>
          </q-tab-panel>

          <q-tab-panel name="account" class="q-pa-none">
            <AccountInfo></AccountInfo>
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </div>
    <CropperDig></CropperDig>
  </q-page>
</template>

<script setup lang="ts">
import 'cropperjs/dist/cropper.css';
import { onMounted, ref, watch } from 'vue';
import CropperDig from './CropperDig.vue';
import UserInfo from './UserInfo.vue';
import AccountInfo from './AccountInfo.vue';
import { initUserInfo } from './shared';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const tab = ref('home');

watch(
  () => {
    return route.query;
  },
  (newVal) => {
    tab.value = (newVal.tabPage as string) || 'home';
  },
);

onMounted(() => {
  tab.value = (route.query.tabPage as string) || 'home';
  initUserInfo();
});
</script>

<style scoped></style>
